<template>
  <div class="StoreSalesRankingcontent">
    <div class="storeTile">门店销量排行</div>
    <div class="stContent">
      <div class="liDiv" v-if="list.length > 0">
        <img class="paimingImg" src="../../assets/img/No1.png" alt="" /><span>{{
          list[0]
        }}</span>
      </div>
      <div class="liDiv" v-if="list.length > 1">
        <img class="paimingImg" src="../../assets/img/No2.png" /><span>{{
          list[1]
        }}</span>
      </div>
      <div class="liDiv" v-if="list.length > 2">
        <img class="paimingImg" src="../../assets/img/No3.png" /><span>{{
          list[2]
        }}</span>
      </div>
      <div class="liDiv" v-if="list.length > 3">
        <span class="paimingTit">NO.4</span><span>{{ list[3] }}</span>
      </div>
      <div class="liDiv" v-if="list.length > 4">
        <span class="paimingTit">NO.5</span><span>{{ list[4] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getStoreSellRanking } from "@/api/user";

export default {
  name: "StoreSalesRanking",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getStoreSellRanking();
  },
  created() {},
  methods: {
    async getStoreSellRanking() {
      const res = await getStoreSellRanking();
      if (res.code === 200) {
        this.list = res.data.list;
        console.log(this.list, "门店销量排行");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.StoreSalesRankingcontent {
  color: aliceblue;
  padding: 0.0911rem 0.1042rem;
  width: 100%;
  height: 100%;
  .storeTile {
    width: 100%;
    text-align: center;
    font-size: 0.0573rem;
    font-weight: bold;
    color: #87baf8;
    margin-bottom: 0.0651rem;
  }
  .stContent {
    .liDiv {
      width: 0.6979rem;
      height: 0.1302rem;
      padding: 0.026rem;
      padding-left: 0.0781rem;
      line-height: 0.0911rem;
      background-color: RGBA(6, 7, 107, 1);
      margin-bottom: 0.0521rem;
      font-size: 0.0521rem;
      font-weight: bold;
      color: #bdd1ff;
      .paimingImg {
        width: 0.0938rem;
        vertical-align: middle;
        margin-right: 0.0781rem;
      }
      .paimingTit {
        width: 0.1172rem;
        margin-right: 0.0547rem;
      }
    }
  }
}
</style>
